<!-- 黑名单 -->
<template>
  <div>
    <a-drawer
			:title="$t('Blacklist')" 
			:visible="drawerVisible"
      width="45%"
			:body-style="drawerBodyStyle"
			@close="handleCancel"
			:maskClosable="false"
		>
      <a-row :gutter="15" v-if="blackClient.length!=0">
        <a-col
          v-for="(item,index) in blackClient"
          :key="index"
          :span="12"
        >
          <div class="out-box">
            <div style="margin-bottom:10px">
              <span class="title-text">{{$t('Client-ip')}}：{{item.ip}}</span>
              <span v-userAuth="'G2-9'" style="float:right">
                <!-- <i @click="handleUnlock(item)" class="icon icon-unprotect16f operate-icon"></i> -->
                <Iconfont class="icon operate-icon" type="icon-unprotect16f" @@click="handleUnlock(item)"></Iconfont>
                
              </span>
            </div>
            <div>
              <span>{{$t('Blocking-time')}}：{{item.create_time.replace(/T/, ' ')}}</span>
              <div class="bg-icon">
                <!-- <i class="icon icon-realm16f"></i> -->
                <Iconfont class="icon" type="icon-realm16f"></Iconfont>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div v-else class="no-data-box">
        <EmptyData />
      </div>
    </a-drawer>
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
export default {
  name: "Blacklist",
  components: { EmptyData },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    blackClient: {
      type: Array,
      required: true
    }
  },

  data() {
    return {
      drawerVisible: false,
      drawerBodyStyle: {
        paddingBottom: '40px !important',
      },
    }
  },

  watch: {
    visible(newValue) {
      this.drawerVisible = newValue;
    },
  },

  methods: {
    //解锁黑名单操作
    handleUnlock(item) {
      this.$emit('handleUnlock', item);
    },

    //关闭黑名单弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'blacklist');
    },
  },
}
</script>
<style scoped>
  .out-box {
    padding: 15px;
    margin-bottom: 20px;
    background-color: var(--mainGreyColor);
  }
  .operate-icon {
    color: var(--themeColor);
    cursor: pointer;
  }
  .title-text {
    color: #333;
    font-weight: 700;
  }
  .bg-icon {
    position: absolute;
    right: 40px;
    bottom: 10px;
    display: inline-block;
  }
  .bg-icon > i {
    font-size: 45px;
    color: #e5e8ea;
  }
  ::v-deep.ant-drawer-body {
    max-height: 660px;
    overflow: auto;
  }
  .no-data-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
</style>